<template>
  <j-modal
    title="网签详情"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :visible="visible"
    :width="1200"
    switchFullscreen
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button type="primary" @click="openEdit(current)">编辑</a-button>
      <a-button type="primary" v-if="current == 0 && !contractStatusList.id" @click="openNew">新增合同</a-button>
      <a-button type="primary" v-if="current == 1 && !deliveryStatusList.id" @click="openNew">新增交付</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-steps :current="current" type="navigation" @change="handleStepsChange">
        <a-step title="订单环节" :status="orderStatusList.statusCode"  :description="orderStatusList.statusDec"/>
        <a-step title="合同环节" :status="contractStatusList.statusCode" :description="contractStatusList.statusDec" :disabled="!contractStatusList.id"/>
<!--        <a-step title="合同环节" :status="contractStatusList.statusCode" :description="contractStatusList.statusDec"/>-->
        <a-step title="交付环节" :status="deliveryStatusList.statusCode" :description="deliveryStatusList.statusDec" :disabled="!deliveryStatusList.id"/>
<!--        <a-step title="交付环节" :status="deliveryStatusList.statusCode" :description="deliveryStatusList.statusDec"/>-->
      </a-steps>
      <div class="steps-content">
        <order-info v-if="current == 0" :model="orderList"></order-info>
        <contract-info v-else-if="current == 1" :model="contractList"></contract-info>
        <delivery-info v-else :model="deliverList"></delivery-info>
      </div>

      <div v-if="objectionList.length>0" style="padding: 24px">
        <h2 v-if="objectionList.length>0">异议内容</h2>
        <table v-if="objectionList.length>0" width="1000px" style="margin-bottom: 30px">
          <tr>
            <th style="width: 150px"></th>
            <th style="width: 300px">日期</th>
            <th>异议内容</th>
            <th>备注</th>
          </tr>
          <template v-for="item in objectionList">
            <tr v-if="item.userType == '1'">
              <td>用户异议</td>
              <td>{{ item.createTime }}</td>
              <td v-for="value in JSON.parse(item.jsonName)">
                {{ value.title }}:{{ value.info }}
              </td>
              <td>{{ item.contents }}</td>
            </tr>
            <tr v-if="item.userType == '2'">
              <td>企业回复</td>
              <td>{{ item.createTime }}</td>
              <td>{{ item.contents }}</td>
              <td></td>
            </tr>
          </template>
        </table>

        <div style="margin-top: 10px" v-if="objectionAreaShow && objectionList.length%2 != 0">
          <a-textarea
            style="width: 100%"
            placeholder="请回复用户提出的异议内容"
            v-model="objectionContents"
            v-decorator="['objectionContents', { rules: [{ required: true, message: '请回复用户提出的异议内容' }] }]"
          />
        </div>
        <div v-if="signAreaShow">
          <div v-if="current == 0">
            <h2>订购方签名确认信息</h2>
            签名：
            <img style="width: 70px; height: 40px" :src="orderList.confirmedName" alt />
            <div>确认日期：{{ orderList.confirmedTime }}</div>
          </div>
          <div v-else-if="current == 1">
            <h2>购买方签名确认信息</h2>
            签名：
            <img style="width: 70px; height: 40px" :src="contractList.confirmedName" alt />
            <div>确认日期：{{ contractList.confirmedTime }}</div>
          </div>
         <div v-else>
           <h2>接收方签名确认信息</h2>
           签名：
           <img style="width: 70px; height: 40px" :src="deliverList.confirmedName" alt />
           <div>确认日期：{{ deliverList.confirmedTime }}</div>
         </div>
        </div>
        <a-button v-if="objectionAreaShow && objectionList.length%2 != 0" type="primary" @click="handleRevertObjection">回复异议</a-button>
      </div>

<!--    <div class="modal-operator">-->
<!--      <a-button type="primary" @click="openEdit(current)">编辑</a-button>-->
<!--      <a-button type="primary" v-if="current == 0 && !contractStatusList.id" @click="openNew">新增合同</a-button>-->
<!--      <a-button type="primary" v-if="current == 1 && !deliveryStatusList.id" @click="openNew">新增交付</a-button>-->
<!--    </div>-->
    </a-spin>

    <edit-order-modal ref="EditOrderModal"  @ok="modalOk"> </edit-order-modal>
    <edit-contract-modal ref="EditContractModal"  @ok="modalOk"> </edit-contract-modal>
    <new-contract-modal ref="NewContractModal"  @ok="modalOk"> </new-contract-modal>
    <new-delivery-modal ref="NewDeliveryModal" @ok="modalOk"> </new-delivery-modal>
  </j-modal>

</template>

<script>
import { getAction, httpAction } from '@api/manage'
import orderInfo from '../components/orderInfo'
import contractInfo from '../components/contractInfo'
import deliveryInfo from '../components/deliveryInfo'
import EditOrderModal from './EditOrderModal'
import EditContractModal from './EditContractModal'
import NewContractModal from './NewContractModal'
import NewDeliveryModal from './NewDeliveryModal'
import moment from 'moment'

export default {
  name: 'orderDetailModal',
  components:{
    orderInfo,
    contractInfo,
    deliveryInfo,
    EditOrderModal,
    EditContractModal,
    NewContractModal,
    NewDeliveryModal
  },
  data() {
    return {
      confirmLoading: false,
      visible: false,
      current: 0,
      url:{
        objectionUrl: '/cxm/cxmWqnrLog/public/findWqnrList',
        order:'/cxm/cxmOrderManager/edit',
        contract: '/cxm/cxmContractManager/edit',
        delivery:'/cxm/cxmDeliverManager/edit',
        getSaleInfos: '/cxm/cxmOrderManager/getSaleInfos'
      },
      objectionAreaShow: false,
      signAreaShow:false,
      objectionList:[],
      objectionContents: '',
      orderList:{},
      contractList:{},
      deliverList:{},
      orderStatusList:{},
      contractStatusList:{},
      deliveryStatusList:{},
      fileNumber:''
    }
  },
  methods: {
    modalOk() {
      this.edit()
    },
    edit(record){
      this.confirmLoading = true
      this.visible = true
      if(record) this.fileNumber = record.fileNumber
      getAction('/cxm/allCxmOrder/public/getByFileNumber', {fileNumber:this.fileNumber}).then((res) => {
        if (res.success) {
          this.confirmLoading = false
          this.orderList = res.result.Order
          this.contractList = res.result.Contract
          this.deliverList = res.result.Deliver

          if(res.result.Contract && res.result.Contract.paymentMethodJson) {
            this.contractList.paymentMethodJson = JSON.parse(this.contractList.paymentMethodJson)
          }
          if(res.result.Contract && res.result.Contract.agentContentsJson) {
            this.contractList.agentContentsJson = JSON.parse(this.contractList.agentContentsJson)
          }
          this.orderStatusList = this.handleStatus(res.result.Order.confirmStatus)
          this.contractStatusList = res.result.Contract?this.handleStatus(res.result.Contract.confirmStatus,res.result.Contract.id):this.handleStatus()
          this.deliveryStatusList = res.result.Deliver?this.handleStatus(res.result.Deliver.confirmStatus,res.result.Deliver.id):this.handleStatus()

          this.getSaleInfos('order', this.orderList)
          this.getSaleInfos('contract', this.contractList)
          if(this.current == 0) {
            this.handleObjection(this.orderList.id)
            if(this.orderList.confirmStatus != '2') {
              this.objectionAreaShow = true
              this.signAreaShow = false
            }else {
              this.objectionAreaShow = false
              this.signAreaShow = true
            }
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getSaleInfos(value,list) {
      let params = {
        bType: value
      }
      getAction(this.url.getSaleInfos, params).then((res) => {
          if (res.success) {
            const enterPriseList = {
              enterpriseUscc: res.result.enterpriseUscc,
              enterpriseName: res.result.enterpriseName,
              region: res.result.registerDistinct,
              businessAddress: res.result.operationAddr,
            }
            if(value == 'order') this.orderList = Object.assign({},list,enterPriseList)
            else if(value == 'contract') this.contractList = Object.assign({},list,enterPriseList)
          } else {
            this.$message.error("查询企业信息失败")
          }
          return res.result
        }
      )
    },
    handleObjection(id) {
      this.objectionList = []
      let params = {
        wqId: id,
        wqType: '1',
        paixu: 'asc'
      }
      getAction(this.url.objectionUrl, params).then((res) => {
        if (res.success) {
          this.objectionList = res.result
        }
      })
    },
    handleStatus(status,id) {
      let statusCode,statusDec,statusList = {}
      switch (status) {
        case '0':
          statusCode = 'wait'
          statusDec = '待确认'
          break
        case '1':
          statusCode = 'wait'
          statusDec = '未确认'
          break
        case '2':
          statusCode = 'finish'
          statusDec = '已确认'
          break
        case '3':
          statusCode = 'error'
          statusDec = '异议'
          break
        case '4':
          statusCode = 'error'
          statusDec = '异议待确认'
          break
        default:
          statusCode = 'wait'
          statusDec = '待上传'
      }
      return statusList={
        id,statusCode,statusDec
      }
    },
    openEdit(){
      console.log(this.current)
      if(this.current == 0){
        this.$refs.EditOrderModal.add(this.orderList)
      }else if(this.current == 1){
        console.log(this.contractList)
        this.$refs.EditContractModal.add(this.contractList)
      }else if(this.current == 2){
        this.$refs.NewDeliveryModal.edit(this.deliverList)
      }
    },
    openNew(){
      if(this.current == 0){
        this.$refs.NewContractModal.add(this.orderList)
      }else if(this.current == 1){
        this.$refs.NewDeliveryModal.add(this.orderList.id,this.contractList)
      }

    },

    // getThreeSteps(){
    //   console.log(this.orderList.fileNumber)
    //   getAction('/cxm/allCxmOrder/public/getByFileNumber?fileNumber'+ this.orderList.fileNumber).then((res) => {
    //     console.log(res)
    //     if (res.success) {
    //       console.log(res)
    //     } else {
    //       this.$message.warning(res.message)
    //     }
    //   })
    // },

    handleStepsChange(current) {
      this.current = current
      if((current == 0 && this.orderList.confirmStatus != '2') || (current == 1 && this.contractList.confirmStatus != '2') || (current == 2 && this.deliverList.confirmStatus != '2')) {
        this.objectionAreaShow = true
      }else {
        this.objectionAreaShow = false
      }
      if((current == 0 && this.orderList.confirmStatus == '2') || (current == 1 && this.contractList.confirmStatus == '2') || (current == 2 && this.deliverList.confirmStatus == '2')) {
        this.signAreaShow = true
      }else {
        this.signAreaShow = false
      }
      let id = ''
      if(current == 0) id = this.orderList.id
      else if(current == 1) id = this.contractList.id
      else id = this.deliverList.id
      this.handleObjection(id)
    },
    handleRevertObjection() {
      const that = this
      let method = 'put'
      let id,url
      if(this.current == 0) {
        id = this.orderList.id
        url = this.url.order
      } else if(this.current == 1) {
        id = this.contractList.id
        url = this.url.contract
      } else {
        id = this.deliverList.id
        url = this.url.delivery
      }
      let formData = {
        id: id,
        objectionContents: that.objectionContents,
        confirmStatus: 4,
      }
      httpAction(url, formData, method)
        .then((res) => {
          if (res.success) {
            that.$message.success(res.message)
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
    },
    handleCancel() {
      this.$emit('ok')
      this.close()
    },
    close() {
      this.visible = false
      this.current = 0
      this.objectionAreaShow = false
      this.signAreaShow = false
      this.fileNumber = ''
      }
  },
  filters: {
    filterTime(time) {
      return time? moment(time).format('YYYY-MM-DD') :''
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
  //.ant-btn {
  //  margin: 10px;
  //  float: right;
  //}
  //.modal-operator {
  //  width: 100%;
  //  display: flex;
  //  justify-content: end;
  //  margin: 20px 0;
  //  padding-right: 24px;
  //}
</style>